/* eslint-disable no-undef */
import moment from 'moment';
import { Button, DatePicker, Input, Select } from 'qnui';
import React from 'react';
import './header.scss';

interface HeaderTimePickerProps {
    // eslint-disable-next-line no-unused-vars
    retrievalData: (value: SearchLogisticsFilterData) => void;
}

class HeaderTimePicker extends React.Component<HeaderTimePickerProps> {
    selectOption: {value: string, label: string}[]
    state: SearchLogisticsData
    constructor (props : HeaderTimePickerProps) {
        super(props);
        this.selectOption = [
            { value: 'buyerNick', label: '订单号或用户昵称' },
            { value: 'receiverName', label: '收件人姓名' },
            { value: 'receiverMobile', label: '收件人手机或电话' },
            { value: 'waybillNum', label: '运单号' },
            { value: 'logisticsCompany', label: '物流公司' },
        ];
        this.state = {
            searchCondition: 'buyerNick',
            inputPlaceholder: '订单号或用户昵称',
            startTime: '',
            endTime: '',
            inputValue: '',
        };
    }
    /** 过滤检索数据 */
    filterData () {
        const searchData = {};
        const reg = new RegExp('^[0-9]{19}$');
        for (const key of Reflect.ownKeys(this.state)) {
            if (['searchCondition', 'inputPlaceholder'].includes(String(key)) || (this.state[key] as String).trim() === '') {
                continue;
            }
            if (key === 'inputValue') {
                const conditionKey: string = reg.test((this.state[key] as String).trim()) ? 'tid' : this.state.searchCondition;
                searchData[conditionKey] = this.state[key];
            } else {
                searchData[key] = this.state[key];
            }
        }

        return searchData;
    }
    /** 禁止选择的时间 */
    disabledDate (calendarDate) {
        const { year, month, date } = calendarDate;
        const theDate = moment(`${year}-${month + 1}-${date}`, 'YYYY-M-D');
        return Number(theDate) > new Date().getTime();
    }
    /** 处理开始时间选择器选择事件 */
    handleStartTime (val: Date, str: string) {
        this.setState({ startTime: str });
    }
    /** 处理结束时间选择器选择事件 */
    handleEndTime (val: Date, str: string) {
        this.setState({ endTime: str });
    }
    /** 处理选择框选择事件 */
    handleSelectChange (value: string) {
        const { label } = this.selectOption.find((val:{value: string, label: string}) => val.value === value);
        this.setState({ searchCondition: value, inputPlaceholder: label });
    }
    /** 处理搜索框输入数据 */
    handleChangeInputValue (value: string) {
        this.setState({ inputValue: value });
    }
    /** 点击触发检索 */
    handleClickSearch () {
        const filterResult = this.filterData();
        this.props.retrievalData(filterResult);
    }
    /** 重置检索数据 */
    handleReset () {
        this.setState({
            searchCondition: 'buyerNick',
            startTime: '',
            endTime: '',
            inputValue: '',
        });
        this.props.retrievalData({});
    }
    render () {
        const { searchCondition, startTime, endTime, inputValue, inputPlaceholder } = this.state;
        return (<div className='header-time-picker'>
            <Select
                style={{ width: '170px' }}
                dataSource={this.selectOption}
                value={searchCondition}
                onChange={this.handleSelectChange.bind(this)} />
            <Input
                style={{ width: '240px' }}
                placeholder={inputPlaceholder}
                value={inputValue}
                onChange={this.handleChangeInputValue.bind(this)} />
            <div className='range-time-picker'>
                <DatePicker
                    className="date-picker"
                    value={startTime}
                    showTime
                    onChange={this.handleStartTime.bind(this)}
                    disabledDate={this.disabledDate.bind(this)}
                />
                <span>-</span>
                <DatePicker
                    className="date-picker"
                    value={endTime}
                    showTime
                    onChange={this.handleEndTime.bind(this)}
                    disabledDate={this.disabledDate.bind(this)}
                />
            </div>
            <div className='button-group'>
                <Button
                    type="primary"
                    style={{ margin: '0 5px' }}
                    onClick={this.handleClickSearch.bind(this)}>确定</Button>
                <Button
                    type="secondary"
                    style={{ margin: '0 5px' }}
                    onClick={this.handleReset.bind(this)}>重置</Button>
            </div>
        </div>);
    }
}


export default HeaderTimePicker;
